<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../template/index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="title">
		<title>Add new attendance</title>
		<script>
			var id = "";
			$('document')
					.ready(
							function() {
								$('#timepickerStart').timepicker();
								$('#timepickerEnd').timepicker();
								$('#attendance-id').addClass(
										"menu-left-selected");
								var item = $('#attendance-id').next('li').find(
										"ul");
								if (item == null) {
									return;
								}
								item.css({
									"display" : "block"
								});

								$('.get-attendance input.attendance-input')
										.hover(function() {
											$(this).next('div').show();
										}, function() {
											$(this).next('div').hide();
										});

								$('.get-attendance input.attendance-input')
										.keydown(function() {
											$(this).val("...");
											return false;
										});
								$('.get-attendance input.attendance-input')
										.click(
												function() {
													id = $(this).attr('id');
													var temp = id.substring(0,
															id.length - 4);
													var value = $(this).val();

													$("#timepickerStart")
															.val(
																	document
																			.getElementById(temp
																					+ "startTime").value);
													$("#timepickerEnd")
															.val(
																	document
																			.getElementById(temp
																					+ "endTime").value);
													$("#description")
															.val(
																	document
																			.getElementById(temp
																					+ "description").value);
													openType();

													$(
															'.choose-type-action tr td a span')
															.each(
																	function() {
																		var type = $(
																				this)
																				.text();
																		if (type == value) {
																			$(
																					'.choose-type-action tr td a')
																					.removeClass(
																							'choose-type-action-selected');
																			$(
																					this)
																					.parent()
																					.addClass(
																							'choose-type-action-selected');
																			return false;
																		}
																	});

												});

								$('.choose-type-action tr td a').click(function() {
									var temp = id.substring(0,id.length - 4);
									document.getElementById(temp+ "startTime").value = $("#timepickerStart").val();
									document.getElementById(temp+ "endTime").value = $("#timepickerEnd").val();
									document.getElementById(temp+ "description").value = $("#description").val();
									
									document.getElementById(temp+ "textStartTime").innerHTML = $("#timepickerStart").val();
									document.getElementById(temp+ "textEndTime").innerHTML = $("#timepickerEnd").val();
									
									var value = $(this).find('span').text();
									document.getElementById(id).value = value;													
									
									closeType();
								});
							});

			function openType() {
				$('.wrap-popup-confirm').show();
				$('#choose-type-panel').center();
			}
			function closeType() {
				$('.wrap-popup-confirm').hide();
				return false;
			}

			function updateValue(value) {
				alert(value);
			}
		</script>

	</ui:define>
	<ui:define name="lcontent">
		<title>Human Resource</title>
		<ui:include src="../template/menu-left/human-resources.xhtml"></ui:include>
	</ui:define>
	<ui:define name="rcontent">
		<h:form id="form1">
			<f:event listener="#{attendanceManagement.onloadNew}"
				type="preRenderView"></f:event>

			<div class="attendance-chosen">
				<h:selectOneMenu value="#{attendanceManagement.month}">
					<f:selectItem itemValue="0" itemLabel="1"></f:selectItem>
					<f:selectItem itemValue="1" itemLabel="2"></f:selectItem>
					<f:selectItem itemValue="2" itemLabel="3"></f:selectItem>
					<f:selectItem itemValue="3" itemLabel="4"></f:selectItem>
					<f:selectItem itemValue="4" itemLabel="5"></f:selectItem>
					<f:selectItem itemValue="5" itemLabel="6"></f:selectItem>
					<f:selectItem itemValue="6" itemLabel="7"></f:selectItem>
					<f:selectItem itemValue="7" itemLabel="8"></f:selectItem>
					<f:selectItem itemValue="8" itemLabel="9"></f:selectItem>
					<f:selectItem itemValue="9" itemLabel="10"></f:selectItem>
					<f:selectItem itemValue="10" itemLabel="11"></f:selectItem>
					<f:selectItem itemValue="11" itemLabel="12"></f:selectItem>
				</h:selectOneMenu>
				<h:selectOneMenu value="#{attendanceManagement.year}">
					<f:selectItem itemValue="2011" itemLabel="2011"></f:selectItem>
					<f:selectItem itemValue="2012" itemLabel="2012"></f:selectItem>
					<f:selectItem itemValue="2013" itemLabel="2013"></f:selectItem>
					<f:selectItem itemValue="2014" itemLabel="2014"></f:selectItem>
				</h:selectOneMenu>
				<h:selectOneMenu value="#{attendanceManagement.selectedDepartment}">
					<f:selectItems value="#{attendanceManagement.listDepartment}"></f:selectItems>
				</h:selectOneMenu>
				<h:commandButton value="#{msg['view']}" styleClass="button" onclick="loading()"
					action="#{attendanceManagement.view}"></h:commandButton>

			</div>
			<div class="clear"></div>
			<div class="control">
				<div class="control-button">
					<h:commandLink action="#{attendanceManagement.save}"
						rendered="#{not empty attendanceManagement.listAttendance}">
						<img
							src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/save_as.png" />
						<span>#{msg['save']}</span>
					</h:commandLink>
				</div>
				<span class="clear"></span>
			</div>
			<div class="clear"></div>
			<div class="rcontent-main">
				<div class="loading">
					<img src="#{facesContext.externalContext.requestContextPath}/resources/images/loading.gif" />
				</div>
				<div class="main-content-table-panel overflowx">
					<table class="main-content-table">
						<tr>
							<th class="w120s" align="left">#{msg['lastname']}</th>
							<th class="w120s" align="left">#{msg['firstname']}</th>
							<ui:repeat var="var" value="#{attendanceManagement.listDay}">
								<th class="table-many-month">#{var}</th>
							</ui:repeat>
						</tr>
						<ui:repeat var="var"
							value="#{attendanceManagement.listAttendance}"
							id="repeatAttendance">
							<tr>
								<td align="left"><div class="w120s overflow">#{var.pe_eplye.ltne}</div>
								</td>
								<td align="left"><div class="w50s overflow">#{var.pe_eplye.ftne}</div>
								</td>
								<ui:repeat var="var1" value="#{var.listDay}" id="repeatDay">
									<td>
										<div class="get-attendance">
											<h:inputHidden id="startTime" value="#{var1.startTime}" />
											<h:inputHidden id="endTime" value="#{var1.endTime}" />
											<h:inputHidden id="description" value="#{var1.description}" />
											<h:inputText id="type" value="#{var1.type}" styleClass="attendance-input" />
											<div class="get-attendance-detail">
												Time in: <h:outputText id="textStartTime" value="#{var1.startTime}" />
												<br/>
												Time out: <h:outputText id="textEndTime" value="#{var1.endTime}" />
												<span class="arrow-down"></span>
											</div>
										</div></td>
								</ui:repeat>
							</tr>
						</ui:repeat>
					</table>
				</div>
			</div>
		</h:form>
		<div class="wrap-popup-confirm">
			<div class="popup w40" id="choose-type-panel">
				<div class="popup-header">
					<span>#{msg['choose-type-working']}</span> <img
						src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/close.png"
						onclick="closeType()" />
				</div>
				<div class="popup-content">
					<table class="choose-type-action w100">
						<tr>
							<td><a>Làm đầy đủ (<span>F</span>)</a></td>
							<td><a>Làm nửa ngày (<span>H</span>)</a></td>
							<td><a>Nghỉ phép (<span>A</span>)</a></td>
						</tr>
						<tr>
							<td><a>Nghỉ lễ (<span>B</span>)</a></td>
							<td><a>Nghỉ bù (<span>C</span>)</a></td>
							<td><a>Họp/Học tập (<span>S</span>)</a></td>
						</tr>
						<tr>
							<td><a>Nghỉ làm (Trừ lương) (<span>X</span>)</a></td>
							<td><a>Đi trễ (<span>L</span>)</a></td>
							<td><a>Về sớm (<span>M</span>)</a></td>
						</tr>
						<tr>
							<td><a>Đi trễ - Về sớm (<span>N</span>)</a></td>
							<td><a>T7/CN(<span>...</span>)</a></td>
							<td><a>Tăng ca (<span>Y</span>)</a></td>
						</tr>
					</table>
					<span class="clear"></span>
					<div class="line"></div>
					<span class="bold">#{msg['detail-information']}</span> <br /> <span
						class="working-type-select"> #{msg['time-in']} <input type="text"
						class="number-input center" id="timepickerStart" /> </span> <span
						class="working-type-select"> #{msg['time-out']} <input type="text"
						class="number-input center" id="timepickerEnd" /> </span>
					<textarea rows="3" class="textarea" id="description">				
					</textarea>
				</div>
			</div>
		</div>
	</ui:define>
</ui:composition>